<!DOCTYPE html>
<html>
<head> 
<meta charset=utf-8>
<meta http-equiv="X-UA-Compatible" content="IE=9">
<title>[pic:name]-{cscms:webname}</title>
<meta name="Keywords" content="{cscms:keywords}" />
<meta name="Description" content="{cscms:description}" />
<link rel="shortcut icon" href="{cscms:webpath}favicon.ico" />
<link rel="stylesheet" href="{cscms:webpath}packs/font/font.css">
<link rel="stylesheet" href="{cscms:webpath}packs/swiper/swiper.css">
<link rel="stylesheet" type="text/css" href="{cscms:tempurl}css/pic.css"/>
<script type='text/javascript' src='{cscms:webpath}packs/swiper/swiper.js'></script>
<script type='text/javascript' src='{cscms:tempurl}js/pic.js'></script>
</head>
<body>
    {cscms:head}
    <div class="w960 bcolor">
        <div class="mar10" style="margin-top: 60px;"></div>
        <div class="mar10"></div>
        <div class="play-show">
            <div class="play-intro left">
                <div class="layui-collapse">
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title" align="left">&nbsp;&nbsp;相关图集</h2>
                        <div class="layui-colla-content layui-show" style="padding: 5px;text-align: left;overflow: hidden;zoom: 1;">
                            {cscms:pictype table="pic_type" loop="12" cid="auto" sort="addtime"}
                            <li class="gs-same">
                                <a href="[pictype:url zdy=pic,id,show,id]" title="[pictype:name]" class="img"><img src="[pictype:pic dir=pic]?size=83*83" width="83" height="83"></a>
                                <a href="[pictype:url zdy=pic,id,show,id]" title="[pictype:name]" class="s_name">[pictype:name]</a>
                            </li>
                            {/cscms:pictype}
                        </div>
                    </div>
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title" align="left">&nbsp;&nbsp;站长推荐</h2>
                        <div class="layui-colla-content layui-show" style="padding:5px;text-align: left;overflow: hidden;zoom: 1;">
                            {cscms:pictype table="pic_type" loop="12" reco="1,2,3,4,5" sort="hits"}
                            <li class="gs-same">
                                <a href="[pictype:url zdy=pic,id,show,id]" title="[pictype:name]" class="img"><img src="[pictype:pic dir=pic]?size=83*83" width="83" height="83"></a>
                                <a href="[pictype:url zdy=pic,id,show,id]" title="[pictype:name]" class="s_name">[pictype:name]</a>
                            </li>
                            {/cscms:pictype}
                        </div>
                    </div>
                </div>
                <div class="mar10"></div>
            </div>
            <div class="play-list left">
                <div class="layui-tab layui-tab-brief" >
                    <ul class="layui-tab-title">
                        <li class="layui-this">《[pic:name]》</li>
                        <span class="right" style="margin-right: 5px;width: 100px;height:40px;font-size: 12px;line-height: 50px;">共有&nbsp;<em style="color: red">[pic:count zdy=pic,sid,id]</em>&nbsp;张图片</span>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="swiper-container" style="width: 100%;height: 400px;{if:[pic:count zdy=pic,sid,id]==0}display:none;{end if}">
                                <div class="swiper-wrapper" style="height: 100%;">
                                    {cscms:pic table="pic" sid="auto" sort="id"}
                                    <div class="swiper-slide" style="height: 100%;"><div onclick="window.open('[pic:pic dir=pic]');" style="height: 100%;display:block;width: 100%;text-align: center;" title="点击查看原图"><img id="zimg[pic:i]" class="zimg" style="max-height: 100%;max-width: 100%;" src="[pic:pic dir=pic]" alt=""></div></div>
                                    {/cscms:pic}
                                </div>
                                <div class="bg-op"></div>
                                <div class="swiper-pagination"></div>
                                <div class="swiper-button-prev"></div>
                                <div class="swiper-button-next"></div>
                            </div>
                            {if:[pic:count zdy=pic,sid,id]==0}<div style="text-align:center;color:#333;height: 60px;line-height: 60px">该相册暂无图片~!</div>{end if}
                            <hr>
                            <div class="pic-bottom">
                                <a class="left" style="position: relative;top: 0px" href="[pic:slink]" title="[pic:sname]">
                                    <img src="[pic:spic]?size=75*75" width="75" height="75">
                                    <span class="link-bg"></span>
                                    <span class="link-name">上一图集</span>
                                </a>
                                <div class="pic-info" style="width: 140px;float: left;overflow: hidden;">
                                    <span>分类：[pic:zdy zd=pic_list,name,cid]</span><br>
                                    <span>来源：[pic:user zd=name]</span>
                                </div>
                                <div class="pic-info" style="max-width: 240px;float: left;overflow: hidden;">
                                    <span>
                                        <a href="javascript:pic.ding('ding',[pic:id]);"><i class="fa fa-thumbs-o-up"></i>&nbsp;赞(<i id="upCnt">[pic:dhits]</i>)</a>&nbsp;&nbsp;&nbsp;&nbsp;
                                        <a href="javascript:pic.ding('cai',[pic:id]);"><i class="fa fa-thumbs-o-down"></i>&nbsp;踩(<i id="downCnt">[pic:chits]</i>)</a>
                                    </span><br><span>标签：[pic:tags]</span>
                                </div>
                                <a style="position: relative;top: 0px;" class="right" href="[pic:xlink]" title="[pic:xname]">
                                    <img src="[pic:xpic]?size=75*75" width="75" height="75">
                                    <span class="link-bg"></span>
                                    <span class="link-name">下一图集</span>
                                </a>
                            </div>
                            [pic:pl]
                        </div>
                        <hr>
                    </div>
                </div>
                        
            </div>
        </div>
    </div>
    <div class="mar10"></div>
    {cscms:bottom}
    <script type="text/javascript">
        var mySwiper = new Swiper ('.swiper-container', {
            direction: 'horizontal',
            width:'630',
            height:'450',
            loop: true,
            paginationType : 'fraction',
            // 如果需要分页器
            pagination: '.swiper-pagination',
            
            // 如果需要前进后退按钮
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
        });
        $(document).ready(function() {
            var num = $('.zimg').length;
            $('.zimg').each(function() {
                var img = $(this);
                img.load(function() {
                    var h = 200-this.height/2;
                    img.css('margin-top', h+'px');
                });
            });
        });
    </script>
</body>
</html>

